<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>
        统计分析
        <small>会员占比</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>会员占比</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div id="chart1" style="height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted: function () {
    this.$http.get("api/member/findMemberScale").then((res) => {
        // let girl = 0;
        // let boy = 0;
        // let a = 0; //0-18岁
        // let b = 0; //19-30岁
        // let c = 0; //31-45岁
        // let d = 0; //46-60岁
        // int e = 0; //61岁及以上
      if(res.data.flag){
        var myChart1 = this.$echarts.init(document.getElementById("chart1"));
        myChart1.setOption({
          title: [
            {
              text: "性别占比",
              left: "30%",
              top: "10%",
              textAlign: "center",
              textStyle: {
                fontSize: 40,
              },
            },
            {
              text: "年龄分段",
              left: "70%",
              top: "10%",
              textAlign: "center",
              textStyle: {
                fontSize: 40,
              },
            },
          ],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: [
              "0岁—18岁",
              "19岁-30岁",
              "31岁-45岁",
              "46岁-60岁",
              "61岁及以上",
              "男士",
              "女士",
            ],
          },
          series: [
            {
              name: "性别占比",
              type: "pie",
              radius: "60%",
              center: ["30%", "60%"],
              text: "性别",
              data: [
                { value: res.data.data.girl, name: "女士" },
                { value: res.data.data.boy, name: "男士" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
            {
              name: "年龄分段",
              type: "pie",
              radius: "60%",
              center: ["70%", "60%"],
              data: [
                { value: res.data.data.a, name: "0岁—18岁" },
                { value: res.data.data.b, name: "19岁-30岁" },
                { value: res.data.data.c, name: "31岁-45岁" },
                { value: res.data.data.d, name: "46岁-60岁" },
                { value: res.data.data.e, name: "61岁及以上" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      }else{
       this.$message.error(res.message)
      }
  })
  },
  created() {
    // this.test();
  },
  methods: {
    // test() {
    //   alert("acv");
    // },
  },
};
</script>